<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../source/jquery.js"></script>
<script type="text/javascript"
	src="../source/jquery-color-selector.unpacked.js"></script>
<link href="style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
	$(document).ready(function() {

		$('#ye').colorselect({
			opts : '#oe',
			ishover : true
		});
		$('#yye').colorselect({
			opts : '#ooe',
			ishover : true
		});
		$('#y').colorselect({
			opts : '#o',
			ishover : false
		});

		$('#yy').colorselect({
			opts : '#oo',
			ishover : false
		});
		$('#yyye').colorselect({
			opts : '#oooe',
			ishover : false,
			afterSelect : function(p, c) {
				alert('parent ' + $(p).html() + ' was clicked');
				alert('child ' + $(c).html() + ' was clicked');
			}
		});
		$('#citychoose').colorselect({
			opts : '#cityopts',
			ishover : true
		});
		$('#citychoosealign').colorselect({
			opts : '#cityoptsalign',
			ishover : true,
			afterSelect : function(p, c) {
				//alert('parent '+$(p).html() + ' was clicked');
				//alert('child '+$(c).html() + ' was clicked');
			}
		});
		$('#iphonechoose').colorselect({
			opts : '#iphoneopts',
			ishover : false,
			afterSelect : function(p, c) {
				//alert('parent '+$(p).html() + ' was clicked');
				//alert('child '+$(c).html() + ' was clicked');
			}
		});
	});
</script>
<style type="text/css">
ul{
padding: 0px 0px 0px 10px;;
}
.notalign {
	width: 580px;
}

.align {
	width: 800px;
}

.align li {
	width: 150px;
}

.iphone {
	width: 420px;
	padding: 0px;
}

.iphone li {
	width: 93px;
	margin: 0px;
}

.iphone  img{
	width: 60px;
	height: 60px;
}
.iphone li a{
	background: none;
}

</style>
</head>
<body>

	<p>
		A basic example: Choose the name: <span id="y" class="colorselect"><a>选择</a>
		</span>
	</p>
	<ul class="colorselect" id="o">
		<li><a>John</a>
		</li>
		<li><a>Andy</a>
		</li>
		<li><a>Jonnason</a>
		</li>
		<li><a>Eric</a>
		</li>
		<li><a>Lampa</a>
		</li>
		<li><a>Sammy</a>
		</li>
		<li><a>Ray</a>
		</li>
		<li><a>Yina</a>
		</li>
	</ul>
	<div class="clear"></div>
	<p>
		A basic example: Choose the Color: <span id="yy" class="colorselect"><a>选择</a>
		</span>
	</p>
	<ul class="colorselect" id="oo">
		<li><a color='#FF0000' class="select">Red</a>
		</li>
		<li><a color='#808080'>Gray</a>
		</li>
		<li><a color='#0000FF'>Blue</a>
		</li>
		<li><a color='#FFA500'>Orange</a>
		</li>
		<li><a color='#000000'>Black</a>
		</li>
		<li><a color='#6B8E23'>OliverDrab</a>
		</li>
		<li><a color='#00FF00'>Lime</a>
		</li>
		<li><a color='#6A5ACD'>Olive</a>
		</li>
		<li><a color='#A0522D'>Sienna</a>
		</li>
	</ul>
	<div class="clear"></div>

	<p>Okay,thats all,let show you a litter different thing.</p>
	<p>
		A basic example with the hover Effect: Choose the name: <span id="ye"
			class="colorselect"><a>选择</a> </span>
	</p>
	<ul class="colorselect" id="oe">
		<li><a class="colorselect_sel">David</a>
		</li>
		<li><a>Andy</a>
		</li>
		<li><a>Jonnason</a>
		</li>
		<li><a>Eric</a>
		</li>
		<li><a>Lampa</a>
		</li>
		<li><a>Sammy</a>
		</li>
		<li><a>Ray</a>
		</li>
		<li><a>Yina</a>
		</li>
	</ul>
	<div class="clear"></div>
	<p>
		A basic example with the hover Effect:: Choose the Color: <span
			id="yye" class="colorselect"><a>选择</a> </span>
	</p>
	<ul class="colorselect" id="ooe">
		<li><a color='#FF0000' class="colorselect_hover">Red</a>
		</li>
		<li><a color='#808080'>Gray</a>
		</li>
		<li><a color='#0000FF'>Blue</a>
		</li>
		<li><a color='#FFA500'>Orange</a>
		</li>
		<li><a color='#000000'>Black</a>
		</li>
		<li><a color='#6B8E23'>OliverDrab</a>
		</li>
		<li><a color='#00FF00'>Lime</a>
		</li>
		<li><a color='#6A5ACD'>Olive</a>
		</li>
		<li><a color='#A0522D'>Sienna</a>
		</li>
	</ul>
	<div class="clear"></div>
	<p>
		A basic example with the callback: Choose the Color: <span id="yyye"
			class="colorselect"><a>选择</a> </span>
	</p>
	<ul class="colorselect" id="oooe">
		<li><a color='#FF0000' class="colorselect_hover">Red</a>
		</li>
		<li><a color='#808080'>Gray</a>
		</li>
		<li><a color='#0000FF'>Blue</a>
		</li>
		<li><a color='#FFA500'>Orange</a>
		</li>
		<li><a color='#000000'>Black</a>
		</li>
		<li><a color='#6B8E23'>OliverDrab</a>
		</li>
		<li><a color='#00FF00'>Lime</a>
		</li>
		<li><a color='#6A5ACD'>Olive</a>
		</li>
		<li><a color='#A0522D'>Sienna</a>
		</li>
	</ul>
	<div class="clear"></div>
	<p>
		A basic example with the callback: Choose the province: <span
			id="citychoose" class="colorselect"><a>选择</a> </span>
	</p>
	<ul class="colorselect notalign" id="cityopts">
		<li><a>全部</a>
		</li>
		<li><a>北京市</a>
		</li>
		<li><a>上海市</a>
		</li>
		<li><a>天津市</a>
		</li>
		<li><a>重庆市</a>
		</li>

		<li><a>河北省</a>
		</li>
		<li><a>山西省</a>
		</li>
		<li><a>内蒙古自治区</a>
		</li>
		<li><a>辽宁省</a>
		</li>
		<li><a>吉林省</a>
		</li>
		<li><a>黑龙江省</a>
		</li>
		<li><a>江苏省</a>
		</li>
		<li><a>浙江省</a>
		</li>
		<li><a>安徽省</a>
		</li>
		<li><a>福建省</a>
		</li>
		<li><a>江西省</a>
		</li>
		<li><a>山东省</a>
		</li>
		<li><a>河南省</a>
		</li>
		<li><a>湖北省</a>
		</li>
		<li><a>湖南省</a>
		</li>
		<li><a>广东省</a>
		</li>
		<li><a>广西壮族自治区</a>
		</li>
		<li><a>海南省</a>
		</li>
		<li><a>四川省</a>
		</li>
		<li><a>贵州省</a>
		</li>
		<li><a>云南省</a>
		</li>
		<li><a>西藏自治区</a>
		</li>
		<li><a>陕西省</a>
		</li>
		<li><a>甘肃省</a>
		</li>
		<li><a>陕西省</a>
		</li>
		<li><a>宁夏回族自治区</a>
		</li>
		<li><a>青海省</a>
		</li>
		<li><a>新疆维吾尔族自治区</a>
		</li>
		<li><a>香港特别行政区</a>
		</li>
		<li><a>澳门特别行政区</a>
		</li>
		<li><a>台湾省</a>
		</li>
	</ul>
	<div class="clear"></div>

	<p>
		A basic example with the callback: Choose the province: <span
			id="citychoosealign" class="colorselect"><a>选择</a> </span>
	</p>
	<ul class="colorselect align" id="cityoptsalign">
		<li><a>全部</a>
		</li>
		<li><a>北京市</a>
			<ul>
				<li><a>a市</a>
				</li>
				<li><a>b市</a>
				</li>
				<li><a>c市</a>
				</li>
				<li><a>d市</a>
				</li>
				<li><a>e市</a>
				</li>
			</ul>
		</li>
		<li><a color="#00FF00">上海市</a>
			<ul>
				<li><a color='#FF0000'>111市</a>
				</li>
				<li><a>2222市</a>
				</li>
				<li><a>33333市</a>
				</li>
				<li><a>4444市</a>
				</li>
				<li><a>55555市</a>
				</li>
			</ul>
		</li>
		<li><a>天津市</a>
		</li>
		<li><a>重庆市</a>
		</li>
		<li><a>河北省</a>
		</li>
		<li><a>山西省</a>
		</li>
		<li><a>内蒙古自治区</a>
		</li>
		<li><a>辽宁省</a>
		</li>
		<li><a>吉林省</a>
		</li>
		<li><a>黑龙江省</a>
		</li>
		<li><a>江苏省</a>
		</li>
		<li><a>浙江省</a>
		</li>
		<li><a>安徽省</a>
		</li>
		<li><a>福建省</a>
		</li>
		<li><a>江西省</a>
		</li>
		<li><a>山东省</a>
		</li>
		<li><a>河南省</a>
		</li>
		<li><a>湖北省</a>
		</li>
		<li><a>湖南省</a>
		</li>
		<li><a>广东省</a>
		</li>
		<li><a>广西壮族自治区</a>
		</li>
		<li><a>海南省</a>
		</li>
		<li><a>四川省</a>
		</li>
		<li><a>贵州省</a>
		</li>
		<li><a>云南省</a>
		</li>
		<li><a>西藏自治区</a>
		</li>
		<li><a>陕西省</a>
		</li>
		<li><a>甘肃省</a>
		</li>
		<li><a>陕西省</a>
		</li>
		<li><a>宁夏回族自治区</a>
		</li>
		<li><a>青海省</a>
		</li>
		<li><a>新疆维吾尔族自治区</a>
		</li>
		<li><a>香港特别行政区</a>
		</li>
		<li><a>澳门特别行政区</a>
		</li>
		<li><a>台湾省</a>
		</li>
	</ul>
	<div class="clear"></div>


	<p>iphone</p>

	<p>
		A basic example with the callback: Choose the province: <span
			id="iphonechoose" class="colorselect iphone"><a>选择</a> </span>
	</p>
	<ul class="colorselect iphone" id="iphoneopts">
		<li><a><img src="icon/Activity Monitor.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/Address Book.png" /> </a>
				</li>
				<li><a><img src="icon/AirPort Extreme Disk.png" /> </a>
				</li>
			</ul>
		</li>
		<li><a><img src="icon/AirPort Disk.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/Connect.png" /> </a>
				</li>
				<li><a><img src="icon/Console.png" /> </a>
				</li>
				<li><a><img src="icon/Dashboard.png" /> </a>
				</li>
			</ul>
		</li>
		<li><a><img src="icon/Applications.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/Dashcode.png" /> </a>
				</li>

			</ul>
		</li>
		<li><a><img src="icon/Audio MIDI Setup.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/Delete.png" /> </a>
				</li>
				<li><a><img src="icon/Desktop.png" /> </a>
				</li>
			</ul>
		</li>
		<li><a><img src="icon/Automator.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/DigitalColor Meter.png" /> </a>
				</li>
				<li><a><img src="icon/Disk Utility.png" /> </a>
				</li>
			</ul>
		</li>
		<li><a><img src="icon/Bluetooth File Exchange.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/Documents.png" /> </a>
				</li>
				<li><a><img src="icon/Downloaded Files.png" /> </a>
				</li>
			</ul>
		</li>
		<li><a><img src="icon/Burn.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/Developer.png" /> </a>
				</li>
				<li><a><img src="icon/Dictionary.png" /> </a>
				</li>
			</ul>
		</li>
		<li><a><img src="icon/Calculator.png" /> </a>
			<ul style="padding: 0px;">
				<li><a><img src="icon/DVD Player.png" /> </a>
				</li>
				<li><a><img src="icon/External.png" /> </a>
				</li>
				<li><a><img src="icon/Eject.png" /> </a>
				</li>
			</ul>
		</li>
	</ul>
	<div class="clear"></div>
</body>

</html>